<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>产品详情</title>
		<link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<script src="../../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugin/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.product {
				background: #f1f1f3;
				padding:30px 0;
				min-height: 500px;
			}
			
			.product-detail{
				background: #fff;
				padding-bottom: 30px;
				min-height: 530px;
			}
			.product-name{
				padding: 15px 15px 10px;
			}
			.imageBox, .product-detail-info{
				display: inline-block;
				vertical-align: text-top;
			}
			.imageBox{
				width: 330px;
				padding-left: 15px;
				margin-right: 30px;
			}
			.bigImage img{
				width: 100%;
				height: 330px;
			}
			.smallImage{
				border-top: 1px solid #E2E2E2;
			}
			.smallImage img{
				width: 100px;
				height: 100px;
				cursor: pointer;
				padding-right: 5px;
			}
			#productFile li{
				list-style-type: circle;
				padding: 5px;
			}
			#productFile a{
				text-decoration: underline ;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row header-row">

			</div>
			<div class="product">
				<div class="product-detail limit-width">
					<p class="product-name"></p>
					<hr />
					<div class="imageBox">
						<div class="bigImage">
							<img src="" />
						</div>
						<div class="smallImage">
							
						</div>
					</div>
					<div class="layui-tab product-detail-info">
						<ul class="layui-tab-title">
							<li class="layui-this">产品介绍</li>
							<li>参数规范</li>
							<li id="">文件下载</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show" id="productIntroduce"></div>
							<div class="layui-tab-item" id="parameterNorm"></div>
							<div class="layui-tab-item" id="productFile">
								<ul>
									
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="footer-nav">

			</div>

	</body>
	<script src="../../utils/api/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../utils/common/index.js" type="text/javascript" charset="utf-8"></script>

</html>
<script type="text/javascript">
	layui.use('element', function() {
		var element = layui.element;
		var id = getRequest().id;

		$.get(requestUrl.baseUrl + requestUrl.apiUrl.productDetail + id, function(data) {
			if(data.code == 0) {
				var productName = data.product.productName;
				var productIntroduce = data.product.productIntroduce;
				var parameterNorm = data.product.parameterNorm;
				
				$('.product-name').text(productName)
				$('#productIntroduce').text(productIntroduce)
				$('#parameterNorm').text(parameterNorm)
			}
		})
		
		$.post(requestUrl.baseUrl + requestUrl.apiUrl.getImage, {
			recordId: id,
			attachType: 'PRODUCT_PIC_402'
		}, function(data) {
			if(data.code == 0 && data.list.length > 0) {
				var list = data.list;
				for(var i = 0; i < list.length; i++) {
					var url = list[i].url;
					$('.smallImage').append('<img class="product-image" src="'+ url +'"/>')
				}
				$('.bigImage img').attr('src', list[0].url)
			}
		})
		
		$.post(requestUrl.baseUrl + requestUrl.apiUrl.getImage, {
			recordId: id,
			attachType: 'PRODUCT_DOWNLOAD_FILE'
		}, function(data) {
			if(data.code == 0 && data.list.length > 0) {
				var list = data.list;
				for(var i = 0; i < list.length; i++) {
					var url = list[i].url;
					var remake = list[i].remark
					$('#productFile ul').append('<li><a href="' + url + '">' + remake + '</a></li>')
				}
			}
		})
		
		$('.smallImage').on('click', '.product-image', function(){
			var src = $(this).attr('src');
			$('.bigImage img').attr('src', src)
		})

	});
</script>